<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-row :gutter="35" class="mb8">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
          <el-card>
            <div>
              <h1>主题配置</h1>
            </div>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="系统的logo图片，展示在系统中的logo图片" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                系统logo
              </span>
              <el-upload class="avatar-uploader" :action="upload.url" :headers="upload.headers" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="upload.logoUrl" :src="upload.logoUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="配置模板的名称：默认" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                配置名称
              </span>
              <el-input placeholder="请输入配置名称" v-model="form.name" />
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="系统的标题：xxx系统" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                系统标题
              </span>
              <el-input placeholder="请输入系统标题" v-model="form.title" />
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="全局主题颜色" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                主题颜色
              </span>
              <colorPicker v-model="form.color" class="theme-color"></colorPicker>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="侧边栏主题，侧边栏的颜色主题，支持明亮和暗黑两种配置" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                侧边栏主题
              </span>
              <el-radio-group size="small" v-model="form.sideTheme">
                <el-radio label="theme-dark">深色主题</el-radio>
                <el-radio label="theme-light">浅色主题</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="布局配置展示">
              <span slot="label">
                <el-tooltip content="布局配置展示，登录成功之后主界面动态展示出主题的配置弹框" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                布局配置展示
              </span>
              <el-radio-group size="small" v-model="form.showSettings">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="显示顶部导航：顶级菜单放在顶部展示，否则在侧边栏进行展示" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                显示顶部导航
              </span>
              <el-radio-group size="small" v-model="form.topNav">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="显示tagsView：显示顶部下面的面包屑菜单" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                显示tagsView
              </span>
              <el-radio-group size="small" v-model="form.tagsView">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="固定头部" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                固定头部
              </span>
              <el-radio-group size="small" v-model="form.fixedHeader">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="显示logo：是否显示系统logo图片" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                显示logo
              </span>
              <el-radio-group size="small" v-model="form.sidebarLogo">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="动态标题：是否显示网址后面的动态标题展示" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                动态标题
              </span>
              <el-radio-group size="small" v-model="form.dynamicTitle">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>

          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="10">
          <el-card>
            <div>
              <h1>功能配置</h1>
            </div>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="开启验证码登录之后，登录会出现图形验证码，需要输入验证码进行登录验证" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                开启验证码登录
              </span>
              <el-radio-group size="small" v-model="form.captcha">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="多端登录支持多个设备同时在线，单端登录只能存在一台设备登录，切换状态需要重新登录" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                是否多端登录
              </span>
              <el-radio-group size="small" v-model="form.manyLogin">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="开放注册账号，系统支持开放注册账号权限" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                开放注册账号
              </span>
              <el-radio-group size="small" v-model="form.register">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="状态">
              <el-switch v-model="form.status" :active-value=1 :inactive-value=0 active-text="激活" inactive-text="禁用">
              </el-switch>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-tooltip content="用户令牌缓存时间，保持用户的登录状态时间，一个小时：3600，一天：86400，三天：259200" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                令牌缓存时间(秒)
              </span>
              <el-input-number style="width:100%" v-model="form.tokenTime" controls-position="right" :min="60" />
            </el-form-item>
            <el-form-item label="显示排序" prop="sort">
              <el-input-number style="width:100%" v-model="form.sort" controls-position="right" :min="0" />
            </el-form-item>
            <el-form-item prop="backgroundImage">
              <span slot="label">
                <el-tooltip content="登录背景图：系统登录界面的背景图，可以自行选择替换" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                登录背景图
              </span>
              <el-upload class="background-uploader" :action="upload.url" :headers="upload.headers" :show-file-list="false" :on-success="handleBackgroundSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="upload.backgroundUrl" :src="upload.backgroundUrl" class="background">
                <i v-else class="el-icon-plus background-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item prop="bottom">
              <span slot="label">
                <el-tooltip content="网站底部的授权信息，主要是备案号和其他的一些信息展示，比如xx版权所有，支持html格式的文本" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                网站底部信息
              </span>
              <el-input placeholder="请输入网站底部信息" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.bottom" />
            </el-form-item>
            <el-form-item label="底部信息预览">
              <span v-html="form.bottom"></span>
            </el-form-item>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">

        </el-col>
      </el-row>
            <div class="setting_operation_but">
            <el-button type="primary" icon="el-icon-check" size="mini" @click="submit">保存</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="fetchSetting">还原</el-button>
          </div>

    </el-form>
  </div>
</template>
<script>
import { getSetting, updateSetting } from "@/api/system/setting";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      form: {
        name: "",
        title: "",
        color: "",
      }, //系统配置表单
      rules: {},
      // 上传文件参数
      upload: {
        logoUrl: "",
        backgroundUrl: "",
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/theme/upload",
      },
    };
  },
  created() {
    this.fetchSetting();
  },
  methods: {
    fetchSetting() {
      getSetting().then((res) => {
        this.form = res.data;
        this.upload.logoUrl = this.form.logo;
        this.upload.backgroundUrl = this.form.background;
      });
    },
    submit() {
      updateSetting(this.form).then((res) => {
        this.msgSuccess(res.message);
        this.fetchSetting();
      });
    },
    handleAvatarSuccess(res, file) {
      this.upload.logoUrl = URL.createObjectURL(file.raw);
      this.form.logo = res.data;
    },
    handleBackgroundSuccess(res, file) {
      this.upload.backgroundUrl = URL.createObjectURL(file.raw);
      this.form.background = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type.indexOf("image/") != -1;
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error(
          "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
        );
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style>
.setting_operation_but {
  display: flex;
  justify-content: center;
  margin-top: 2%;
}

/* 头像上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
/* 背景图上传 */
.background-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.background-uploader .el-upload:hover {
  border-color: #409eff;
}
.background-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: auto;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.background {
  width: auto;
  max-height: 200px;
  display: block;
}
/* 主题颜色组件位置 */
.theme-color {
  float: left;
  height: 26px;
  margin: 10px 0 0 0;
}
</style>